<html>
<head>
<title>GRID PHP</title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.blueopal.min.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kendo.all.min.js"></script>

<script type="text/javascript">



var data = [
                            "Albania",
							"Andorra",
							"Armenia",
							"Austria",
							"Azerbaijan",
							"Belarus",
							"Belgium",
							"Bosnia & Herzegovina",
							"Bulgaria",
							"Croatia",
							"Cyprus",
							"Czech Republic",
							"Denmark",
							"Estonia",
							"Finland",
							"France",
							"Georgia",
							"Germany",
							"Greece",
							"Hungary",
							"Iceland",
							"Ireland",
							"Italy",
							"Kosovo",
							"Latvia",
							"Liechtenstein",
							"Lithuania",
							"Luxembourg",
							"Macedonia",
							"Malta",
							"Moldova",
							"Monaco",
							"Montenegro",
							"Netherlands",
							"Norway",
							"Poland",
							"Portugal",
							"Romania",
							"Russia",
							"San Marino",
							"Serbia",
							"Slovakia",
							"Slovenia",
							"Spain",
							"Sweden",
							"Switzerland",
							"Turkey",
							"Ukraine",
							"United Kingdom",
							"Vatican City"
                        ];
						
$(function() {
   $("#grid").kendoGrid({
                        dataSource: {
                            transport: {
                                read: "untitled/fetch.php",
                                            update: {url:"untitled/update.php", type:"POST"},
                                            create: {url:"untitled/create.php",type:"POST"},
                                            destroy: {url:"untitled/destroy.php",type:"POST"}
                            },
                                       batch: true,
                            schema: {
                                model: {
                                                 id: "id",
                                    fields: {
                                        id: { type: "number" },
                                        c1: { type: "string"},
                                        c2: { type: "string" },
                                    }
                                }
                            },
                            pageSize: 25
                        },
                                 editable:  "inline",
                        height: 600,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                                 toolbar: ["create"],
                        columns: [{
                                field:"c1",
                                            title: "Column1",
                                filterable: true
                            },
                            {
                                field: "c2",
                                title: "Column2",
								editor: function(container, options) {
									 // create a KendoUI AutoComplete widget as column editor
									  $('<input name="' + options.field + '"/>')
										  .appendTo(container)
										  .kendoAutoComplete({
											  filter: "startswith",
											  dataSource: data,
											  /*/
											  {
												  transport: {
													read: "untitled/autodata.php",
												  },
												  schema: {
														model: {
															id: "TenCV",
															fields: {
																TenCV:{type: "string"},
															}
														}
													},
												  
											  }
											  /*/
										  });
								 }
                            },
							//{ command: [{text:"Edit record", name:"edit"}, {text:"Delete record",name:"destroy"}, text: "View Details", click: showDetails }, title: " ", width: "140px" }],
                                      { command: [{text:"Edit record", name:"edit"}, {text:"Delete record",name:"destroy"}, {text: "Do Something", click: showDetails}], title: " ", width: "500px" }
                        ]
                    });
});

	function showDetails(e)
	{
		alert("e");
	}
	
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>  